<template>
	<u-transition
		:show="true"
		mode="slide-left"
		:duration="300"
		:custom-style="{ width: '100%' }"
		:style="{ 'transition-delay': animationDelay + 's' }"
	>
		<view class="session-card" @click="handleClick">
			<!-- 状态盖章 -->
			<view
				class="session-status-stamp"
				:class="{
					'stamp-pending': (item.status == 'pending' || item.status === 'pending'),
					'stamp-ongoing': (item.status == 'ongoing' || item.status === 'ongoing'),
					'stamp-completed': (item.status == 'completed' || item.status === 'completed'),
					'stamp-cancelled': (item.status == 'cancelled' || item.status === 'cancelled'),
				}"
			>
				<text v-if="item.status == 'pending' || item.status === 'pending'">未开始</text>
				<text v-else-if="item.status == 'ongoing' || item.status === 'ongoing'">进行中</text>
				<text v-else-if="item.status == 'completed' || item.status === 'completed'">已结束</text>
				<text v-else-if="item.status == 'cancelled' || item.status === 'cancelled'">已取消</text>
				<text v-else>调试:{{item.status}}</text>
			</view>
			
			<!-- 签到状态盖章 -->
			<view
				class="signin-status-stamp"
				:class="{
					'signin-not-signed': item.sign_status === 0,
					'signin-signed-in': item.sign_status === 1,
					'signin-signed-out': item.sign_status === 2,
					'signin-supplementary': item.sign_status === 3,
					'signin-pulse': item.sign_status === 0 || (item.status === 'ongoing' && item.sign_status === 1)
				}"
				v-if="typeof item.sign_status !== 'undefined'"
			>
				<text v-if="item.sign_status === 0">未签到</text>
				<text v-else-if="item.sign_status === 1">已签到</text>
				<text v-else-if="item.sign_status === 2">已签退</text>
				<text v-else-if="item.sign_status === 3">补录</text>
				<text v-else>签到:{{item.sign_status}}</text>
			</view>

			<!-- 卡片头部 - 场次编号 -->
			<view class="session-header">
				<view class="session-number-badge">
					<text class="session-number">第{{ item.session_number }}场</text>
				</view>
			</view>

			<!-- 时间信息区域 -->
			<view class="time-info-section">
				<view class="date-row">
					<view class="calendar-icon"></view>
					<text class="session-date">{{ formatDate(item.session_date) }}</text>
				</view>
				<view class="time-row">
					<view class="clock-icon"></view>
					<view class="time-detail">
						<text class="start-time">开始：{{ formatTime(item.start_time) }}</text>
						<text class="end-time">结束：{{ formatTime(item.end_time) }}</text>
					</view>
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="session-details">
				<view class="detail-item">
					<view class="location-icon"></view>
					<text class="detail-text">{{ item.teach_address || '地点待定' }}</text>
				</view>
			</view>

			<!-- 卡片底部 -->
			<view class="card-footer">
				<view class="view-detail">
					<text>查看详情</text>
					<view class="arrow-right-icon"></view>
				</view>
			</view>
		</view>
	</u-transition>
</template>

<script>
export default {
	name: "SessionCard",
	props: {
		item: {
			type: Object,
			required: true
		},
		index: {
			type: Number,
			default: 0
		}
	},
	computed: {
		animationDelay() {
			return this.index * 0.05
		}
	},
	methods: {
		handleClick() {
			this.$emit('click', this.item)
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '日期待定'
			const date = new Date(dateStr)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
			return `${year}-${month}-${day} 周${weekDay}`
		},
		
		// 格式化时间
		formatTime(timestamp) {
			if (!timestamp) return '--:--'
			const date = new Date(timestamp * 1000)
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			return `${hour}:${minute}`
		},
		
	}
}
</script>

<style lang="scss" scoped>
/* 场次卡片 - 独特设计 */
.session-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid #e8f4ff;
	position: relative;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.session-card:active {
	transform: translateY(2rpx) scale(0.99);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
	border-color: #2979ff;
}

/* 状态盖章 */
.session-status-stamp {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	font-size: 18rpx;
	font-weight: 700;
	width: 120rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6rpx;
	transform: rotate(-10deg);
	border: 2rpx solid;
	z-index: 10;
	opacity: 0.95;
	box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.1);
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
	letter-spacing: 1rpx;
	clip-path: polygon(8% 0%, 92% 0%, 100% 20%, 95% 100%, 5% 100%, 0% 20%);
}

.stamp-pending {
	color: #606266;
	border-color: #909399;
	background: radial-gradient(circle, rgba(144, 147, 153, 0.15) 0%, rgba(249, 250, 251, 0.9) 100%);
}

.stamp-ongoing {
	color: #1890ff;
	border-color: #1890ff;
	background: radial-gradient(circle, rgba(24, 144, 255, 0.15) 0%, rgba(230, 247, 255, 0.9) 100%);
	animation: stampPulse 2s infinite;
}

.stamp-completed {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}

.stamp-cancelled {
	color: #ff4d4f;
	border-color: #ff4d4f;
	background: radial-gradient(circle, rgba(255, 77, 79, 0.15) 0%, rgba(255, 241, 240, 0.9) 100%);
}

@keyframes stampPulse {
	0% { transform: rotate(-10deg) scale(1); }
	50% { transform: rotate(-10deg) scale(1.05); }
	100% { transform: rotate(-10deg) scale(1); }
}

/* 签到状态盖章 - 圆形原型设计 */
.signin-status-stamp {
	position: absolute;
	top: 50%;
	right: 30rpx;
	transform: translateY(-50%) rotate(-15deg);
	font-size: 16rpx;
	font-weight: 700;
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 3rpx solid;
	z-index: 10;
	opacity: 0.9;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
	letter-spacing: 0.5rpx;
}

/* 添加内圈边框效果 */
.signin-status-stamp::before {
	content: '';
	position: absolute;
	top: 8rpx;
	left: 8rpx;
	right: 8rpx;
	bottom: 8rpx;
	border: 1rpx solid currentColor;
	border-radius: 50%;
	opacity: 0.3;
}

/* 添加外圈虚线效果 */
.signin-status-stamp::after {
	content: '';
	position: absolute;
	top: -6rpx;
	left: -6rpx;
	right: -6rpx;
	bottom: -6rpx;
	border: 1rpx dashed currentColor;
	border-radius: 50%;
	opacity: 0.2;
}

/* 未签到 - 灰色 */
.signin-not-signed {
	color: #909399;
	border-color: #909399;
	background: radial-gradient(circle, rgba(144, 147, 153, 0.15) 0%, rgba(249, 250, 251, 0.9) 100%);
}

/* 已签到 - 天蓝色 */
.signin-signed-in {
	color: #00bfff;
	border-color: #00bfff;
	background: radial-gradient(circle, rgba(0, 191, 255, 0.15) 0%, rgba(230, 249, 255, 0.9) 100%);
}

/* 已签退 - 绿色 */
.signin-signed-out {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}

/* 补录 - 绿色 */
.signin-supplementary {
	color: #52c41a;
	border-color: #52c41a;
	background: radial-gradient(circle, rgba(82, 196, 26, 0.15) 0%, rgba(246, 255, 237, 0.9) 100%);
}

.signin-pulse {
	animation: signinPulse 1.5s ease-in-out infinite;
}

@keyframes signinPulse {
	0% { 
		transform: rotate(8deg) scale(1); 
		box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.4);
	}
	50% { 
		transform: rotate(8deg) scale(1.08); 
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2), 0 0 0 10rpx rgba(0, 0, 0, 0.1);
	}
	100% { 
		transform: rotate(8deg) scale(1); 
		box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* 未签到脉冲动画 - 灰色 */
.signin-not-signed.signin-pulse {
	animation: signinPulseGrey 1.5s ease-in-out infinite;
}

@keyframes signinPulseGrey {
	0% { 
		transform: translateY(-50%) rotate(-15deg) scale(1); 
		box-shadow: 0 4rpx 16rpx rgba(144, 147, 153, 0.15), 0 0 0 0 rgba(144, 147, 153, 0.5);
	}
	50% { 
		transform: translateY(-50%) rotate(-15deg) scale(1.1); 
		box-shadow: 0 6rpx 20rpx rgba(144, 147, 153, 0.25), 0 0 0 15rpx rgba(144, 147, 153, 0.1);
	}
	100% { 
		transform: translateY(-50%) rotate(-15deg) scale(1); 
		box-shadow: 0 4rpx 16rpx rgba(144, 147, 153, 0.15), 0 0 0 0 rgba(144, 147, 153, 0);
	}
}

/* 待签退脉冲动画 - 天蓝色 */
.signin-signed-in.signin-pulse {
	animation: signinPulseBlue 1.5s ease-in-out infinite;
}

@keyframes signinPulseBlue {
	0% { 
		transform: translateY(-50%) rotate(-15deg) scale(1); 
		box-shadow: 0 4rpx 16rpx rgba(0, 191, 255, 0.15), 0 0 0 0 rgba(0, 191, 255, 0.5);
	}
	50% { 
		transform: translateY(-50%) rotate(-15deg) scale(1.1); 
		box-shadow: 0 6rpx 20rpx rgba(0, 191, 255, 0.25), 0 0 0 15rpx rgba(0, 191, 255, 0.1);
	}
	100% { 
		transform: translateY(-50%) rotate(-15deg) scale(1); 
		box-shadow: 0 4rpx 16rpx rgba(0, 191, 255, 0.15), 0 0 0 0 rgba(0, 191, 255, 0);
	}
}

/* 卡片头部 */
.session-header {
	padding: 20rpx 30rpx;
	background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
	border-bottom: 1rpx solid #e8f4ff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.session-number-badge {
	display: inline-block;
	background: linear-gradient(135deg, #2979ff 0%, #40a9ff 100%);
	padding: 10rpx 24rpx;
	border-radius: 25rpx;
	box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
}

.session-number {
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 600;
	letter-spacing: 1rpx;
}


/* 时间信息区域 */
.time-info-section {
	padding: 24rpx 30rpx;
	background: linear-gradient(135deg, #fafcff 0%, #f0f8ff 100%);
	border-bottom: 1rpx solid #e8f4ff;
}

.date-row {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.calendar-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	position: relative;
}

.calendar-icon::before {
	content: "";
	position: absolute;
	width: 20rpx;
	height: 18rpx;
	border: 2rpx solid #2979ff;
	border-radius: 4rpx;
	top: 6rpx;
	left: 4rpx;
}

.calendar-icon::after {
	content: "";
	position: absolute;
	width: 8rpx;
	height: 2rpx;
	background-color: #2979ff;
	top: 12rpx;
	left: 10rpx;
	box-shadow: 0 4rpx 0 #2979ff;
}

.session-date {
	font-size: 28rpx;
	color: #2979ff;
	font-weight: 600;
}

.time-row {
	display: flex;
	align-items: flex-start;
}

.clock-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	position: relative;
	margin-top: 2rpx;
}

.clock-icon::before {
	content: "";
	position: absolute;
	width: 20rpx;
	height: 20rpx;
	border: 2rpx solid #19be6b;
	border-radius: 50%;
	top: 4rpx;
	left: 4rpx;
}

.clock-icon::after {
	content: "";
	position: absolute;
	width: 6rpx;
	height: 1rpx;
	background-color: #19be6b;
	top: 14rpx;
	left: 14rpx;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	box-shadow: 0 -6rpx 0 #19be6b;
}

.time-detail {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.start-time, .end-time {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}


/* 其他详情 */
.session-details {
	padding: 20rpx 30rpx;
}

.detail-item {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.location-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
	position: relative;
}

.location-icon::before {
	content: "";
	position: absolute;
	width: 12rpx;
	height: 12rpx;
	background-color: #ff9900;
	border-radius: 50%;
	top: 2rpx;
	left: 6rpx;
}

.location-icon::after {
	content: "";
	position: absolute;
	width: 1rpx;
	height: 8rpx;
	background-color: #ff9900;
	bottom: 4rpx;
	left: 12rpx;
	transform: rotate(-45deg);
}


.detail-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
}

/* 卡片底部 */
.card-footer {
	padding: 16rpx 24rpx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: #fbfcff;
	border-top: none;
}

.view-detail {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	background-color: transparent;
	border: none;
	transition: all 0.2s ease;
}

.view-detail:active {
	transform: translateY(1rpx);
	opacity: 0.8;
}

.view-detail text {
	font-size: 26rpx;
	color: #2979ff;
	margin-right: 10rpx;
	font-weight: 500;
	font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	letter-spacing: 0.5rpx;
}

.arrow-right-icon {
	width: 12rpx;
	height: 12rpx;
	border-top: 1.5rpx solid #2979ff;
	border-right: 1.5rpx solid #2979ff;
	transform: rotate(45deg);
}
</style>

